<template>
	<view class="container" :style="theme">
		<view class="head">
			<image class="banner" :src="cont.poster" mode="widthFix"></image>
			<view class="head-cont">
				<view class="title"
					:class="cont.status==0||cont.status==2||cont.status==4||cont.status==5?'hui':cont.status==1?'on':cont.status==3?'blue':''">
					<text>{{cont.status == 0?'待发布':cont.status == 1?'报名中':cont.status == 2?'报名已截止':cont.status == 3?'进行中':cont.status == 4?'活动结束':'已取消'}}</text>{{cont.name}}
				</view>
				<view class="info">{{cont.theme}}</view>
				<view class="label">
					<view class="label-left">主办方：</view>
					<view class="label-right">{{cont.sponsor}}</view>
				</view>
				<view class="label">
					<view class="label-left">承办方：</view>
					<view class="label-right">{{cont.organizer}}</view>
				</view>
				<view class="label">
					<view class="label-left">活动时间：</view>
					<view class="label-right">{{cont.activityTime}}</view>
				</view>
				<view class="label">
					<view class="label-left">报名截止：</view>
					<view class="label-right">{{cont.applyEndTime}}</view>
				</view>
				<view class="label">
					<view class="label-left">活动地点：</view>
					<view class="label-right">{{cont.siteName}}</view>
				</view>
				<view class="label">
					<view class="label-left">活动价格：</view>
					<view class="label-right">￥{{cont.price}}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">活动详情</view>
			<u-parse :content="cont.info"></u-parse>
		</view>
		<view class="bottomState flex-cb">
			<view class="f28 cDD5040 flex-cc" @click="jump('/pages/index/index','', 1)">
				<image :src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'"></image>
				<view>首页</view>
			</view>
			<view class="flex-left">
				<button v-if="cont.status=='1' && !cont.payStatus" class='share' open-type="share">分享好友</button>
				<view v-if="cont.status=='1' && !cont.payStatus" class="registerNow" @click="jump('/pages/activity/signup?id=',id)">立即报名</view>
				<view v-if="cont.payStatus && cont.orderId" class="registerNow" @click="jump('/pages/order/detail?type=6&orderId=',cont.orderId)">查看订单</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				cont: {}
			}
		},
		computed: mapState(["renovationInfo"]),
		onLoad(ops) {
			this.id = ops.id
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			activityShare() {
				this.$app.ajax({
					api: this.$api.activityShare(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.activityInfoMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
					} else {
						setTimeout(()=> {
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		},
		onShareAppMessage(e) {
			if (e.from == 'button') {
				this.activityShare()
			}
		},

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 80rpx;
	}

	.head {
		background-color: #ffff;
		margin-bottom: 24rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-items {
		height: 100%;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.swiper-item image {
		width: 100%;
	}

	.head-cont {
		padding: 30rpx;
	}

	.head-cont .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.head-cont .title text {
		height: 44rpx;
		background: $color;
		border-radius: 8rpx;
		display: inline-block;
		padding: 0 10rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #ffff;
	}

	// .head-cont .title.hui text {
	// 	background: #999999;
	// }

	.head-cont .title.blue text {
		background: rgba(0, 0, 0, 0.6);
	}
	// .head-cont .title.on text {
	// 	background: $phb;
	// }

	.info {
		font-size: 24rpx;
		font-weight: 400;
		color: #555555;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	}

	.card {
		background-color: #ffff;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}

	.card .bt {
		color: #222222;
		line-height: 1.5;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
	}


	.coach-right .ks text {
		color: #222222;
		display: inline;
		margin: 0 10rpx;
	}

	.label {
		display: flex;
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.label-left {
		color: #666666;
		display: inline-block;
		width: 5em;
	}

	.label-right {
		flex: 1;
	}

	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomState .flex-cc {
		width: 100rpx;
		flex-direction: column;
	}

	.bottomState .flex-cc image {
		width: 44rpx;
		height: 44rpx;
	}

	.share {
		height: 68rpx;
		padding: 0 34rpx;
		color: $color;
		border: 1px solid $color;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 36rpx;
		background-color: #fff;
		line-height: 68rpx;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}

	.cancel {
		height: 68rpx;
		padding: 0 34rpx;
		color: #666666;
		border: 1px solid #999999;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
	}

	.registeredEndColor {
		background: $phb;
	}

	.underwayColor {
		background: $blueBg;
	}

	.finishedColor {
		background: #CCCCCC;
	}
</style>
